<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本选择器</title>
    <style>
        /* 1.后代选择器（E 空格F） 选择E元素下所有的F选择器，无论是子元素还是子孙元素 */
        /* .u1 li{
            color: green;
        } */

        /* 2.子元素选择器（E>F）   选择E元素的直接子元素F */
        /* .u2>li{
            color: blue;
        } */

        /* 3.相邻兄弟选择器（E+F） 具有相同父元素，选择E后面紧挨着的F元素 */
        /* .u1+li{
            color: red;
        } */

        /* 4.通用兄弟选择器（E~F）, CSS3新增加一种选择器 具有相同父元素，选择E后面所有的F元素 */
        .u1~li{
            color: red;
        } 
    </style>
</head>
<body>
    <ul class="u1">
        <li><a>aaaaaaaaa</a>
            <ul class="u2">
                <li><a>111111111</a></li>
                <li><a>222222222</a></li>
                <li><a>333333333</a></li>
            </ul>
        </li>
        <li>bbbbbbbbb</li>
        <li>ccccccccc</li>
    </ul>
    <li>AAAAAAAAAA</li>
    <li>BBBBBBBBBB</li>
    <li>CCCCCCCCCC</li>
</body>
</html>